<template>
  <view class="user">
    <view class="user_info">
      <view class="user_header_left">
        <image
          v-if="userInfo?.avatar"
          :src="userInfo?.avatar"
          mode="aspectFill"
        ></image>
        <view v-else class="user_avatar_default">
          <image
            src="../../static/images/head2@2x.png"
            mode="aspectFill"
          ></image>
        </view>
        <view
          class="user_info_name"
          @click="
            !userInfo?.userBusinessId &&
              handleClick({ route: '/pages/views/login' })
          "
        >
          <view class="user_name">{{ userInfo?.nickName || "请登录" }}</view>
          <view class="user_id" v-if="userInfo?.userBusinessId">
            <view class="id_tag" @click="copyId"
              ><text>{{ userInfo?.userBusinessId || "" }}</text>
              <image
                class="copy"
                src="../../static/images/user_copy_icon.png"
              ></image
            ></view>
            <view class="id_tag" v-if="userInfo?.flowingShareholders === '1'">合伙企业股东</view>
            <view class="id_tag">{{ userLevelType[userInfo.userLevel] }}</view>
          </view>
          <div class="proxy_name id_tag" v-if="userInfo?.channelStatus == '1'">
            {{ businessProxyData?.channelDistrictName  || businessProxyData?.channelCityName || businessProxyData?.channelProvinceName }}代理
          </div>
        </view>
      </view>
      <view class="user_header_right">
        <image
          @click="handleClick({ route: '/pages/user/userInfo' })"
          src="../../static/images/setting_icon.png"
          mode="aspectFill"
        ></image>
      </view>
    </view>

    <view class="user_stats">
      <view
        class="stat_item"
        v-for="(item, index) in priceList"
        @click="handleClick({ route: item.route, type: item.type })"
        :key="index"
      >
        <view class="label">{{ item.title }}</view>
        <view class="value"
          >{{ item.value }} <text>{{ item.unit }}</text></view
        >
      </view>
    </view>

    <i-card padding="0">
      <i-lineRow
        :diyRight="true"
        padding="16rpx 24rpx"
        @click="handleClick({ route: '/pages/views/orderList' })"
      >
        <template #left>
          <view class="menu_item">
            <image
              src="../../static/images/grid_icon/wddd_icon.png"
              mode="aspectFill"
            ></image>
            <text>我的订单</text>
          </view>
        </template>
        <template #right>
          <!-- <view class="goto"> -->
          <text class="goto_text" style="color: #999; font-size: 24rpx"
            >全部订单</text
          >
          <image
            style="margin-left: 6rpx; width: 36rpx; height: 36rpx"
            src="../../static/images/goto_icon.png"
            mode="aspectFill"
          ></image>
          <!-- </view> -->
        </template>
      </i-lineRow>
    </i-card>
    <view style="height: 48rpx"></view>

    <i-card padding="0">
      <i-lineRow
        padding="16rpx 24rpx"
        v-for="(item, index) in userList"
        :key="index"
        @click="handleClick(item)"
      >
        <template #left>
          <view class="menu_item">
            <image :src="item.url" mode="aspectFill"></image>
            <text>{{ item.title }}</text>
          </view>
        </template>
      </i-lineRow>
    </i-card>
  </view>
  <i-loginModal></i-loginModal>
</template>

<script lang="ts" setup>
import { userList } from "./defaultData";
import useStore from "../../stores/index";
import { computed, ref } from "vue";
import { checkLogin, copyStr, setStorage, userLevelType } from "../../utils/common";
import { onShow, onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { getUserChannelVo } from "../../api/index";

const invitationCode = ref("");
const businessProxyData = ref<any>({});
const store = useStore();
const userInfo = computed(() => store.userInfo) as any;
const priceList = computed(() => [
  {
    title: "可提现金额",
    value: userInfo.value.totalAmount || "0.00",
    route: "/pages/wallet/index",
    unit: "元",
  },
  {
    title: "转赠金额",
    value: userInfo.value.transferAmount || "0.00",
    route: "/pages/wallet/index",
    unit: "元",
  },
  {
    title: "设备管理",
    value: userInfo.value.deviceCount || "0",
    route: "/pages/order/index",
    type: "switchTab",
    unit: "个",
  },
  {
    title: "当日收益",
    value: userInfo.value.deviceIncomeYesterday || "0.00",
    route: "/pages/order/index",
    type: "switchTab",
    unit: "元",
  },
]);

const handleClick = async (item: any) => {
  if (item.id === '20' && userInfo.value.channelStatus === '1') {
     uni.showToast({
      icon: 'none',
      title: '您已是渠道代理',
      duration: 2000,
     })
    return
  }
  if (item.route) {
    if (item.type === "switchTab") {
      // 如果是 tabbar 页面，使用 switchTab 跳转
      uni.switchTab({
        url: item.route,
      });
    } else {
      try {
        await checkLogin();
        uni.navigateTo({
          url: item.route,
        });
      } catch (error) {}
    }
  }
};

const copyId = () => {
  copyStr(userInfo.value.userBusinessId || "");
};
onShow(() => {
  store.setUserInfo();
  getUserChannelVoData();
});

onLoad((options: { invitationCode: string; }) => {
  console.log(options, "optionsoptions");
  if (options && options.invitationCode) {
    invitationCode.value = options.invitationCode;
    setStorage("invitationCode", options.invitationCode);
  }
});

onPullDownRefresh(()=> {
  store.setUserInfo();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000);
}) 

const getUserChannelVoData = async () => {
  const {data} = await getUserChannelVo();
  console.log(data, "data");
  businessProxyData.value = data;
};


</script>

<style lang="scss" scoped>
.user {
  width: 100%;
  // height: 100vh;
  background: url(../../static/images/user_bg.png) top center no-repeat;
  background-size: 100% 580rpx;
  background-position: top;
  background-color: #f5f5f5;
  overflow-y: auto;

  .user_header {
    padding: 30rpx;

    &_left {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 60rpx;

      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }
  }

  .user_info {
    @include flexRS;
    padding: 24rpx;
    padding-top: 80rpx;
    .user_header_left {
      flex: 1;
      display: flex;
      align-items: center;
      .user_info_name {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }
      .user_avatar_default {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background-color: #eee;
        margin-right: 24rpx;
      }
    }
    .user_header_right {
      width: 48rpx;
      height: 48rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .user_name {
      font-size: 38rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
      @include overflow;
      max-width: 60vw;
    }
    .user_id {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

 

      .agent_tag {
        background-color: #fbe9d6;
        color: #fb652e;
        font-size: 24rpx;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
      }
    }
  }
  .id_tag {
        background-color: #ffd7a1;
        color: #ff7b00;
        font-size: 22rpx !important;
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        margin-right: 10rpx;
        @include flexRS;
        .copy {
          width: 24rpx !important;
          height: 24rpx !important;
          margin-right: 0 !important;
        }
      }
  .user_stats {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(to right, #ffb413, #ff9a00);
    border-radius: 16rpx;
    margin: 30rpx;
    padding: 24rpx;

    .stat_item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-right: 1px solid rgba(255, 255, 255, 0.3);

      &:last-child {
        border-right: none;
      }

      .value {
        font-family: DIN Alternate, DIN Alternate;
        color: #fff;
        margin-bottom: 10rpx;
        font-size: 32rpx;
        font-weight: bold;
        text {
          font-size: 20rpx !important;
        }
      }

      .label {
        font-size: 24rpx !important;
        color: rgba(255, 255, 255, 0.8);
        font-family: PingFang SC, PingFang SC;
        margin-bottom: 4rpx;
      }
    }
  }

  .menu_item {
    display: flex;
    align-items: center;
    // margin-bottom: 30rpx;
    font-size: 28rpx;
    font-weight: 500;

    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 24rpx;
    }
  }
  .goto {
    flex-shrink: 0;
    font-size: 24rpx !important;
    color: #999;
    text-align: right;
    image {
      width: 36rpx;
      height: 36rpx;
    }
  }
}
</style>
